<template>
    <div v-loading="isLoading">
        <div class="patrol-item">
            <span class="patrol-item-name">巡更点：</span>
            <span>
                <span :class="patrolPoint === point.id ? 'point-item-active':'point-item'" @click="pointBtn(point)" v-for="point in pointList">{{point.point_name}}</span>
            </span>
        </div>
        <el-table
        :data="tableData"
        border
        style="width: 100%">
            <el-table-column
                label="序号"
                width="80">
                <template slot-scope="scope">{{scope.$index+1}}</template>
            </el-table-column>
            <el-table-column
                prop="create_time"
                label="创建时间"
                width="180">
            </el-table-column>
            <el-table-column
                prop="point_name"
                label="巡更点"
                width="140">
            </el-table-column>
            <el-table-column
                prop="project"
                label="巡更项目">
            </el-table-column>
            <el-table-column
                label="创建人"
                width="140">
                <template slot-scope="scope">
                    <div v-if="scope.row.create_user">
                        <div v-if="scope.row.create_user == item.id" v-for="item in staffList" :key="item.id">{{item.name}}</div>
                    </div>
                    <div v-else>/</div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            class="admin-page"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40, 50]"
            :page-size="20"
            layout="sizes, prev, pager, next, jumper"
            :total="count">
        </el-pagination>
    </div>
</template>
<script>
    export default {
        props: {
            patrolPointList: Array,
            staffList: Array,
            name: String
        },
        data() {
            return {
                isLoading: false,
                pointList: [],
                patrolPoint: '',
                tableData: [],
                pagesize: 20,
                currentPage: 1,
                count: 0
            }
        },
        created() {
            this.pagesize = this.pageSize;
            this.pointList = JSON.parse(JSON.stringify(this.patrolPointList));
            this.pointList.unshift({id: '', point_name: '全部'});
            this.requestInfo(1);
        },
        methods: {
            requestInfo(val) {
                this.isLoading = true;
                this.currentPage = val;
                this.$http.get(`/api/v1/patrol/project/?page=${this.currentPage}&page_size=${this.pagesize}${this.patrolPoint?`&patrol_point=${this.patrolPoint}`:''}`)
                .then((res) => {
                    this.isLoading = false;
                    this.tableData = res.data;
                })
                .catch(() => {
                    this.isLoading = false;
                })
            },
            // 
            pointBtn(item) {
                this.patrolPoint = item.id;
                this.isLoading = true;
                if(item.id) this.$emit('listenEvent', item.point_name);
                else this.$emit('listenEvent', '');
                this.requestInfo(1);
            },
            handleCurrentChange(val) {
                this.$store.commit('timeStamp', Date.parse(new Date()));
                this.requestInfo(val);
            },
            handleSizeChange(val) {
                this.pagesize = val;
                this.$store.commit('timeStamp', Date.parse(new Date()));
                this.requestInfo(1);
            }
        }
    }
</script>
<style lang="scss" scoped>
    .patrol-item {
        .patrol-item-name {
            
        }
        .point-item, .point-item-active {
            margin: 12px;
            display: inline-block;
            margin-top: 0;
            cursor: pointer;
        } 
        .point-item-active {
            color: #409eff;
        }
    }
</style>